/*
 * @Author: hechengfei h349187021@163.com
 * @Date: 2022-08-23 08:25:55
 * @LastEditors: hechengfei h349187021@163.com
 * @LastEditTime: 2022-08-23 12:13:39
 * @FilePath: \xiangmu\src\components\contractmanagement\Addcontract.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useEffect } from 'react'
import { inject, observer } from 'mobx-react'
import { Select, DatePicker, Space } from 'antd';
import moment from 'moment'
function Addcontract(props) {
    const [customer_name, setcustomer_name] = useState('')
    const [contract_no, setcontract_no] = useState('')
    const [contract_classification, setcontract_classification] = useState('')
    const [order_number, setorder_number] = useState('')
    const [start_date, setstart_date] = useState('')
    const [total_amount, settotal_amount] = useState('')
    const [received, setreceived] = useState('')
    const [end_date, setend_date] = useState('')
    const [provide_invoice, setprovide_invoice] = useState('')
    const [include_tax, setinclude_tax] = useState('')
    const [remarks, setremarks] = useState('')
    const [user_name, setuser_name] = useState('')


    const { Option } = Select;
    const { RangePicker } = DatePicker;
    const onChangetime = (value, dateString) => {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
        setstart_date(dateString[0])
        setend_date(dateString[1])
    };
    props.contractStore.addcontractinfo =
    {
        customer_name,
        contract_no,
        contract_classification,
        order_number,
        start_date,
        end_date,
        total_amount,
        received,
        include_tax,
        provide_invoice,
        remarks,
        user_name,
        entry_time: start_date
    }
    const onOk = (value) => {
        console.log('onOk: ', value);
    };

    // 合同分类
    const onChangeclassification = (value) => {
        setcontract_classification(value)
    };
    // 是否提供发票
    const provideinvoice = (value) => {
        setprovide_invoice(value)
    };
    const username = (value) => {
        setuser_name(value)
    };
    // 是否含税
    const includetax = (value) => {
        setinclude_tax(value)
    };

    // 客户名称
    const changecustomname = (e) => {
        setcustomer_name(e.target.value)
    }
    // 合同编号
    useEffect(() => {
        let date = new Date()
        let mycontract_no = 'HT' + date.getTime()
        setcontract_no(mycontract_no)
    }, [])
    //赋值


    // 订单编号
    const changeorderno = (e) => {
        setorder_number(e.target.value)
    }
    //总金额
    const changetotalamount = (e) => {
        settotal_amount(e.target.value)
    }
    // 已收款
    const changereceived = (e) => {
        setreceived(e.target.value)
    }
    // 备注
    const changeremark = (e) => {
        setremarks(e.target.value)
    }
    return (
        <div>
            <div><span>客户名称</span><input value={customer_name} onChange={(e) => { changecustomname(e) }} type="text" /></div>
            <div><span>合同编号</span><input type="text" value={contract_no} disabled /></div>
            <div><span>合同分类</span>
                <Select
                    placeholder="请选择"
                    onChange={onChangeclassification}
                    defaultValue={contract_classification}
                    filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
                >
                    <Option value="1">买卖</Option>
                    <Option value="2">租赁</Option>
                    <Option value="3">工程</Option>
                    <Option value="4">技术</Option>
                    <Option value="5">委托</Option>
                    <Option value="6">其他</Option>
                </Select>
            </div>
            <div><span>订单编号</span><input value={order_number} onChange={(e) => { changeorderno(e) }} type="text" /></div>
            <div>
                <Space direction="vertical" size={12}>
                    <RangePicker
                        showTime={{
                            format: 'HH:MM:SS',
                            defaultValue: [
                                moment(start_date, 'YYYY-MM-DD HH:MM:SS'), moment(end_date, 'YYYY-MM-DD HH:MM:SS')
                            ]
                        }}
                        format="YYYY-MM-DD HH:MM:SS"
                        onChange={onChangetime}
                        onOk={onOk} />
                </Space>
            </div>
            <div><span>总金额</span><input value={total_amount} onChange={(e) => { changetotalamount(e) }} type="text" />
                <span>已收款</span><input value={received} onChange={(e) => { changereceived(e) }} type="text" /></div>
            <div>
                <span>提供发票</span>
                <Select
                    placeholder="请选择"
                    onChange={provideinvoice}
                    defaultValue={provide_invoice === 1 ? "是" : "否"}
                    filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
                >
                    <Option value="1">是</Option>
                    <Option value="2">否</Option>
                </Select>
                <span>是否含税</span><Select
                    placeholder="请选择"
                    onChange={includetax}
                    defaultValue={include_tax === 1 ? "是" : "否"}
                    filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
                >
                    <Option value="1">是</Option>
                    <Option value="2">否</Option>
                </Select>
            </div>
            <div><span>附件</span><input type="file" /></div>
            <div><span>备注</span><input value={remarks} onChange={(e) => { changeremark(e) }} type="text" /></div>
            <div><span>业务员</span>
                <Select
                    placeholder="请选择"
                    onChange={username}
                    defaultValue={user_name}
                    filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
                >
                    <Option value="1">超级管理员</Option>
                    <Option value="2">张三</Option>
                </Select>
            </div>
        </div>
    )
}
export default inject('contractStore')(observer(Addcontract))